$(function () {
  $.ajax({url:"./data/month.json"})
  .then(res=>{
    
    render(res)
  })
  let name = ["PM2.5", "PM10", "SO₂", "NO₂", "CO", "O₃"]
  let unit = ["μg/m³", "μg/m³", "μg/m³", "μg/m³", "mg/m³", "μg/m³"]
 function render(res){
  var myChart = echarts.init(document.querySelector("main .section1 .rader .chart"));
  var option = {
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    title: {
      text: 'xx月大气污染雷达图',
      // textStyle: {
      //   color: '#fff'
      // },
      left: 0,
      top: 0
    },
    grid:{
      top:"20%",
      height:"30%"
    },
    // legend: {
    //   right: 0,
    //   top: 0,
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   selectedMode: false,
    // },
    tooltip: {
      borderColor: 'rgba(255,255,255,0.2)',
      formatter:function(params){
        let str=''
        for(let i=0;i<6;i++){
          
          str+=`${name[i].padEnd(5,)}:${params.data.value[i]}(${unit[i]})</br>`
        }
        return str
      }
     
    },
    radar: [
      {
        indicator: [

          { text: 'PM2.5' },
          { text: 'PM10' },
          { text: 'SO₂' },
          { text: 'NO₂' },
          { text: 'CO' },
          { text: 'O₃' }
        ],
        // center: ['25%', '50%'],
        // radius: 120,
        // startAngle: 90,
        // boundaryGap: [0, 0],
        // splitNumber: 5,
        // 菱形图
        shape: 'polygon',
        axisName: {
          formatter: '{value}',
          color: '#747474',
          fontStyle: 'normal'
        },
        splitArea: {
          areaStyle: {
            color: ['#1E1E1E', '#37373D', '#716C72', '#716C72'],
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 10
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(211, 253, 250, 0.8)'
          }
        },
        splitLine: {
          lineStyle: {
            // 轮廓分割线
            color: 'rgba(0, 3, 0, 0.8)'

          }
        }
      },
    ],
    // position: ['50%', '50%'],
    series: [
      {
        label: {
          show: true,
          formatter: function (params) {
            return params.value;
          }
        },


        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 5
          }
        },
        data: [
          // {
          //   value: [],
          //   name: '当月值',
          //   areaStyle: {
          //     color: '#007ACC'
          //   }
          // },
          // {
          //   value: [75, 150, 50, 40, 10, 100],
          //   name: '正常值',
          //   areaStyle: {
          //     color: 'rgba(246, 102, 46, 0.8)'
          //   }
          // }
        ]
      },
    ],
    timeline: {
      data: (() => {
        let month = new Array();
        for (let i = 1; i <= 12; i++) {
          month.push(i + '月')
        }
        return [...month]
      })(),
      axisType: 'category',
      autoPlay: true,
      // show:false,
      left: "28%",
      right: "60%",
      top: "-9%",
      symbolSize: 0,
      lineStyle: {
        show: false
      },
      label: {
        show: false
      },
      // itemStyle:{
      //     opacity:0,
      // },
      checkpointStyle: {
        symbolSize: 0
      },
      controlStyle: {
        showPrevBtn: false,
        // showNextBtn: false,
        itemSize: 18
      }

    },
    options:(()=>{
      let obj={
        0:"pm25",
        1:"pm10",
        2:"so2",
        3:"no2",
        4:"co",
        5:"o3",
      }
      let finalArr=[]
      res.forEach(item=>{
        finalArr.push({
          title:{
            text:`${res.indexOf(item)+1}`.padStart(2,0)+"月大气污染"
          },
          series:{
            data:(()=>{
              let arr=[]
              arr.push({
                name:"当月值",
                areaStyle:{
                  color: '#007ACC'
                },
                value:(()=>{
                  let crr=[]
                  for(let i=0;i<6;i++){
                    crr.push((()=>{
                      let sum=0

                      // let max=item[obj[i]][0]
                      for(let j=0;j<item[obj[i]].length;j++){
                        sum+=item[obj[i]][j]

                        // item[obj[i]][j]>max?max=item[obj[i]][j]:max
                      }
                      sum=Math.round(sum/item[obj[i]].length*100)/100
                      // console.log(sum)
                      return sum

                      // return max
                    })())
                  }
                  return crr
                })(),
              })
              // arr.push({
              //   value: [75, 150, 50, 40, 10, 100],
              //   name: '正常值',
              //   areaStyle: {
              //     color: 'rgba(246, 102, 46, 0.8)'
              //   }
              // })
              return arr
            })(),
          }
        })
        
      })
      return finalArr
    })(),
  };
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
  }







})

